<template>
  <div class="app-container">
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="owner"
      class="demo-ruleForm"
      :inline="true"
      size="small"
    >
      <el-form-item label="昵称" prop="ownerNickname">
        <el-input v-model="owner.ownerNickname" style="width: 150px" />
      </el-form-item>
      <el-form-item label="真实姓名" prop="ownerRealName">
        <el-input v-model="owner.ownerRealName" style="width: 150px" />
      </el-form-item>
      <el-form-item label="身份证号码" prop="ownerIdCard">
        <el-input v-model.number="owner.ownerIdCard" style="width: 150px" />
      </el-form-item>
      <el-form-item label="手机号码" prop="ownerPhoneNumber">
        <el-input v-model.number="owner.ownerPhoneNumber" style="width: 150px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain icon="el-icon-search" size="mini" @click="submitForm(owner,current,size)">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetForm()">重置</el-button>
      </el-form-item>

      <!--      <el-select placeholder="请选择小区" v-model="this.ownerList">-->
      <!--        <el-option >{{owner.communityName}}</el-option>-->
      <!--      </el-select>-->
    </el-form>

    <el-dialog :visible.sync="isAdd" :title="title" @close="clearValidate">
      <el-form ref="zyOwnerForm" :model="newOwner" :rules="rules">
        <el-row>
          <el-col style="margin-left: 40%">
            <el-upload
              class="avatar-uploader"
              :headers="token"
              action="http://localhost:8080/zyOwner/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="newOwner.ownerPortrait" :src="newOwner.ownerPortrait" class="avatar" style="width: 150px; height: 150px;border-radius: 50%" alt="">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="12">
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="ownerRealName">
              <el-input v-model="newOwner.ownerRealName" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="昵称" :label-width="formLabelWidth" prop="ownerNickname">
              <el-input v-model="newOwner.ownerNickname" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="性别" :label-width="formLabelWidth" prop="ownerGender">
              <el-select v-model="newOwner.ownerGender" placeholder="请选择性别">
                <el-option label="男" value="Male" />
                <el-option label="女" value="Miss" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄" :label-width="formLabelWidth" prop="ownerAge">
              <el-input v-model="newOwner.ownerAge" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="身份证号码" :label-width="formLabelWidth" prop="ownerIdCard">
              <el-input v-model="newOwner.ownerIdCard" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" :label-width="formLabelWidth" prop="ownerPhoneNumber">
              <el-input v-model="newOwner.ownerPhoneNumber" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="!isUpdate" type="primary" plain size="mini" @click="addOwner">添 加</el-button>
        <el-button v-if="isUpdate" type="primary" plain size="mini" @click="updateOwn(newOwner)">修 改</el-button>
        <el-button size="mini" @click="isAdd = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-row>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" style="margin-left: 10px" size="mini" @click="exportOwner(owner,current,size)">导出</el-button>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="mb8">
      <el-col>
        <right-toolbar
          :show-search.sync="showSearch"
          @queryTable="submitForm(owner,current,size)"
        />
      </el-col>
    </el-row>

    <el-table
      ref="multipleTable"
      :data="ownerList"
      tooltip-effect="dark"
      style="width: 100%"
      size="mini"
      @selection-change="handleSelectionChange"
    >

      <el-table-column
        label="序号"
        type="index"
        width="50px"
        :index="indexMethod"
        align="center"
      />
      <el-table-column
        label="昵称"
        width="120px"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerNickname }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="真实姓名"
        width="100px"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerRealName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="性别"
        width="70px"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.ownerGender == 'Male'" style="margin-left: 10px">男</span>
          <span v-else style="margin-left: 10px">女</span>
        </template>
      </el-table-column><el-table-column
        label="年龄"
        width="70px"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerAge }}</span>
        </template>
      </el-table-column><el-table-column
        label="身份证号码"
        align="center"
        width="180"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerIdCard }}</span>
        </template>
      </el-table-column><el-table-column
        label="手机号码"
        width="110px"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerPhoneNumber }}</span>
        </template>
      </el-table-column><el-table-column
        label="小区名称"
        width="150px"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.communityName }}</span>
        </template>
      </el-table-column><el-table-column
        label="楼栋名称"
        width="100px"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.buildingName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="单元名称"
        width="100px"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.unitName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="房间名称"
        width="100px"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.roomName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="出生日期"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerBirthday }}</span>
        </template>
      </el-table-column><el-table-column
        label="业主类型"
        align="center"
      >
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ownerType }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            icon="el-icon-edit"
            @click="updateOwner(scope.row)"
          >修改</el-button>
          <el-button
            v-if="scope.row.roomStatus && scope.row.roomStatus === 'Binding' "
            type="text"
            size="mini"
            icon="el-icon-scissors"
            @click="handleEdit(scope.row,scope.row.ownerRoom)"
          >解绑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="业主解绑" :visible.sync="dialogFormVisible" width="600px">
      <el-form :model="row">
        <el-form-item label="小区名称" :label-width="formLabelWidth">
          <el-input v-model="row.communityName" autocomplete="off" disabled="disabled" />
        </el-form-item>
        <el-form-item label="楼栋名称" :label-width="formLabelWidth">
          <el-input v-model="row.buildingName" autocomplete="off" disabled="disabled" />
        </el-form-item>
        <el-form-item label="单元名称" :label-width="formLabelWidth">
          <el-input v-model="row.unitName" autocomplete="off" disabled="disabled" />
        </el-form-item>
        <el-form-item label="房间名称" :label-width="formLabelWidth">
          <el-input v-model="row.roomName" autocomplete="off" disabled="disabled" />
        </el-form-item>
        <el-form-item label="业主名字" :label-width="formLabelWidth">
          <el-input v-model="row.ownerRealName" autocomplete="off" disabled="disabled" />
        </el-form-item>
        <el-form-item label="身份证号" :label-width="formLabelWidth">
          <el-input v-model="row.ownerIdCard" autocomplete="off" disabled="disabled" />
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="row.ownerPhoneNumber" autocomplete="off" disabled="disabled" />
        </el-form-item>
        <el-form-item label="审核备注" :label-width="formLabelWidth">
          <el-input v-model="row.remark" type="textarea" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" plain :plain="true" size="mini" @click="confirmAudit(row)">解绑成功</el-button>
        <el-button size="mini" @click="dialogFormVisible = false">取消操作</el-button>
      </div>
    </el-dialog>

    <div class="block">
      <el-pagination
        :current-page="this.current"
        :page-sizes="[1,2,3,5,10,15,20]"
        :page-size="this.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { validatePhone, validateIdNo } from '@/utils/validate'

export default {
  name: 'Index',
  data() {
    return {
      total: 0, // 查询的总数
      current: 1, // 当前页
      size: 5, // 每页显示的条数
      ownerList: [], // 查询的业主信息对象集合
      owner: {
        ownerNickname: '', // 业主昵称
        ownerRealName: '', // 业主名字
        ownerGender: '', // 业主性别
        ownerAge: '', // 业主年龄
        ownerIdCard: '', // 业主身份证号码
        ownerPhoneNumber: '', // 业主手机号码
        communityName: '', // 小区名字
        buildingName: '', // 楼栋名字
        unitName: '', // 单元名称
        roomName: '', // 房间名称
        ownerBirthday: '', // 业主生日
        ownerType: '',
        ownerPortrait: '',
        zorOwnerType: '',
        ownerRoomId: '',
        remark: '',
        ownerRoom: {}
      }, // 业主类型
      multipleSelection: [], // 多选框的集合
      communityNames: [], // 小区名的集合
      showSearch: true, // 显示/隐藏搜索栏
      row: {}, // 业主对象的镜像
      dialogFormVisible: false, // 显示/隐藏审核弹出层
      formLabelWidth: '120px', // 弹出层输入框宽度
      isAdd: false,
      token: { 'Authorization': getToken() },
      newOwner: {},
      isUpdate: false,
      title: '',

      rules: {
        ownerRealName: [
          { required: true, message: '请输入真实名字', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在1到30个字符之间', trigger: 'blur' }
        ],
        ownerNickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在1到30个字符之间', trigger: 'blur' }
        ],
        ownerGender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        ownerAge: [
          { required: true, message: '年龄不能为空', trigger: 'blur' }
        ],
        ownerPhoneNumber: [
          { required: true, validator: validatePhone, trigger: 'blur' }
        ],
        ownerIdCard: [
          { required: true, validator: validateIdNo, trigger: 'blur' }
        ]
      }
    }
  },
  // 钩子函数
  created() {
    this.submitForm(this.current, this.size)
  },
  methods: {
    // 分页查询 + 模糊查询搜索
    submitForm(zyOwnerVO, current, size) {
      zyOwnerVO = this.owner,
      current = this.current,
      size = this.size,
      this.axios.get('zyOwner/zyOwnerFuzzyQuery/?' + this.qs.stringify(zyOwnerVO),
        {
          params: {
            currents: current,
            sizes: size
          }
        })
        .then(res => {
          if (res.data.status == 'OK') {
            this.ownerList = res.data.data.records,
            this.total = res.data.data.total,
            this.current = res.data.data.current,
            this.size = res.data.data.size
          }
        })
    },
    // 解绑界面显示/隐藏
    handleEdit(owner) {
      this.row = this.qs.parse(this.qs.stringify(owner))
      this.dialogFormVisible = true
    },
    // 解绑
    confirmAudit(row) {
      this.$confirm('该用户将被解绑, 是否继续?', '警告', {
        confirmButtonClass: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(async() => {
        await this.axios.delete('zyOwnerRoom/unbundled/' + row.ownerRoomId).then(res => {
          if (res.data.data == 'ok') {
            this.$message.success('解绑成功')
            const totalPage = Math.ceil((this.total - 1) / this.size) // 总页数
            this.current = this.current > totalPage ? totalPage : this.current
            this.current = this.current < 1 ? 1 : this.current
            // 添加审核记录信息
            this.axios.post('zyOwnerRoomRecord/addownerroom', row)
          } else {
            this.$message.error('出错啦，联系管理员')
          }
          this.dialogFormVisible = false
        })
        await this.submitForm(this.current, this.size, this.owner)
      })
    },
    // 导出
    exportOwner(zyOwnerVO, current, size) {
      const param = {
        'currents': current,
        'sizes': size
      }
      location.href = 'http://localhost:8080/zyOwner/export?' + this.qs.stringify(zyOwnerVO) + '&' + this.qs.stringify(param) + '&Authorization=' + getToken()
    },
    // 修改每页显示的数据条数
    handleSizeChange(size) {
      this.size = size
      this.submitForm(this.current, this.size)
    },
    // 修改当前页面
    handleCurrentChange(current) {
      this.current = current,
      this.submitForm(this.current, this.size)
    },
    // 多选框选择
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 重置表单数据
    resetForm() {
      this.owner.ownerNickname = ''
      this.owner.ownerRealName = ''
      this.owner.ownerGender = ''
      this.owner.ownerAge = ''
      this.owner.ownerIdCard = ''
      this.owner.ownerPhoneNumber = ''
      this.owner.communityName = ''
      this.owner.buildingName = ''
      this.owner.unitName = ''
      this.owner.roomName = ''
      this.owner.ownerBirthday = ''
      this.owner.ownerPortrait = ''
      this.owner.ownerType = ''
      this.submitForm(this.current, this.size, this.owner)
    },
    // 修改序号
    indexMethod(index) {
      index = (index + 1) + (this.current - 1) * this.size
      return index
    },
    handleAdd() {
      this.isUpdate = false
      this.isAdd = true
      this.title = '添加业主'
      this.newOwner = this.qs.parse(this.qs.stringify(this.owner))
    },
    async  addOwner() {
      await this.axios.post('zyOwner/add', this.qs.stringify(this.newOwner))
        .then(res => {
          if (res.data.data == 'ok') {
            this.$message({
              message: '添加成功,请到业主审核页面添加业主房屋绑定关系',
              type: 'success'
            })
          } else {
            this.$message({
              message: '添加失败',
              type: 'error'
            })
          }
          this.isAdd = false
          this.newOwner = {}
        })
      await this.submitForm(this.newOwner, this.current, this.size)
    },
    handleAvatarSuccess(res, file) {
      // this.newOwner.ownerPortrait = URL.createObjectURL(file.raw)
      this.newOwner.ownerPortrait = res
    },
    updateOwner(row) {
      this.isAdd = true
      this.isUpdate = true
      this.title = '业主信息修改'
      this.newOwner = this.qs.parse(this.qs.stringify(row))
    },
    clearValidate() {
      this.$refs['zyOwnerForm'].clearValidate()
    },
    async updateOwn(row) {
      await this.axios.put('zyOwner/update', row)
        .then(res => {
          if (res.data.data == 'ok') {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          } else {
            this.$message.error('修改失败，请联系管理员')
          }
          this.isAdd = false
          this.isUpdate = false
        })
      await this.submitForm(this.newOwner, this.current, this.size)
    }
  }
}
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
